<template>
    <div class="tab">
        <div class="tab-container">
            <div class="tab" v-for="(item,index) in tabList" :key="index" :class="{tabActive: tabNum == index}" @click="switchTab(index,item.path,item.title)">
                <img :src="item.icon" alt="">
                <img :src="item.active" alt="">
                <span>{{item.title}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import home from '../../assets/icons/home.png'
import homeActive from '../../assets/icons/home_active.png'
import classify from '../../assets/icons/classify.png'
import classifyActive from '../../assets/icons/classify_active.png'
import credits from '../../assets/icons/credits.png'
import creditsActive from '../../assets/icons/credits_active.png'
import shopping from '../../assets/icons/shopping.png'
import shoppingActive from '../../assets/icons/shopping_active.png'
import me from '../../assets/icons/me.png'
import meActive from '../../assets/icons/me_active.png'

export default {
    name:'tab',
    data(){
        return {
            tabList:[
                {title:"首页", icon:home, active:homeActive, path:'/container/home'},
                {title:"分类", icon:classify, active:classifyActive, path:'/container/classify'},
                {title:"水果积分", icon:credits, active:creditsActive, path:'/container/credits'},
                {title:"购物车", icon:shopping, active:shoppingActive, path:'/container/shopping'},
                {title:"个人中心", icon:me, active:meActive, path:'/container/me'}
            ],
            tabNum:0
        }
    },
    methods:{
        switchTab(index,path,title){
            this.tabNum = index;
            sessionStorage.setItem('tabNum', index);
            this.$router.push(path);
            this.$store.state.tab = title;
        }
    },
    mounted(){
        let temNum = sessionStorage.getItem('tabNum');
        if(!temNum){
            this.tabNum = 0;
        }else{
            this.tabNum = temNum;
        }
    },
    activated(){
        let temNum = sessionStorage.getItem('tabNum');
        if(!temNum){
            this.tabNum = 0;
        }else{
            this.tabNum = temNum;
        }
    }
}
</script>

<style lang='less'>
@rem:100rem;

.tab{
    width: 750/@rem;
    .tab-container{
        width: 100%;
        height: 96/@rem;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 1px solid #cccccc;
        .tab{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 42/@rem;
                height: 42/@rem;
                margin-top: 6/@rem;
            }
            img:nth-of-type(1){
                display: block;
            }
            img:nth-of-type(2){
                display: none;
            }
            span{
                font-size: 16/@rem;
                color: #898989;
                margin-top: 10/@rem;
                font-weight: 700;
            }
        }
        .tabActive{
            img:nth-of-type(1){
                display: none;
            }
            img:nth-of-type(2){
                display: block;
            }
            span{
                color: #6699ff;
            }
        }
    }
}

</style>
